<template>
  <div class="designer-content">
    <header-toolbar v-if="SelectToolBar"></header-toolbar>
    <canvas-main v-loading="showContent" class="content-wrap"></canvas-main>
    <canvas-map v-show="showMap"></canvas-map>
    <footer-toolbar class="content-bottom"></footer-toolbar>
  </div>
</template>

<script>
import { computed, defineComponent, ref } from "vue";
import canvasMain from "./canvas-main/index.vue";
import FooterToolbar from "./footer-toolbar/footer-toolbar.vue";
import HeaderToolbar from "./header-toolbar/header-toolbar.vue";
import CanvasMap from "./canvas-main/canvas-map.vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "design-content",
  components: {
    CanvasMap,
    HeaderToolbar,
    FooterToolbar,
    canvasMain,
  },
  setup() {
    const showContent = ref(false);
    const showMap = computed(() => store.state.design.selectedMap);
    const store = useStore();
    const SelectToolBar = computed(() => store.state.design.selectToolBar);
    return {
      showContent,
      SelectToolBar,
      showMap
    };
  }
});
</script>

<style lang="less" scoped>
.designer-content {
  position: relative;
  z-index: 2;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-basis: auto;
  min-width: 0;
  flex-direction: column;
  box-sizing: border-box;
  background-image: url("../../../assets/png/bg-design.png");
  flex-wrap: nowrap;

  .content-toolbar {
    flex: 0 0 40px;
    width: 100%;
  }

  .content-wrap {
    flex: 1 1 auto;
    overflow: hidden;
    height: 100%;
  }

  .content-bottom {
    width: 100%;
    flex: 0 0 32px;
  }
}
</style>
